1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
import { Button, Column, Dialog, DialogTrigger, Modal } from '@umami/react-zen';
import { ActionForm } from '@/components/common/ActionForm';
import {
useLoginQuery,
useMessages,
useModified,
useNavigation,
useUserTeamsQuery,
} from '@/components/hooks';
import { ROLES } from '@/lib/constants';
import { WebsiteDeleteForm } from './WebsiteDeleteForm';
import { WebsiteResetForm } from './WebsiteResetForm';
import { WebsiteTransferForm } from './WebsiteTransferForm';
export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
const { formatMessage, labels, messages } = useMessages();
const { user } = useLoginQuery();
const { touch } = useModified();
const { router, pathname, teamId, renderUrl } = useNavigation();
const { data: teams } = useUserTeamsQuery(user.id);
const isAdmin = pathname.startsWith('/admin');
const canTransferWebsite =
(
(!teamId &&
teams?.data?.filter(({ members }) =>
members.find(
({ role, userId }) =>
[ROLES.teamOwner, ROLES.teamManager].includes(role) && userId === user.id,
),
)) ||
[]
).length > 0 ||
(teamId &&
!!teams?.data
?.find(({ id }) => id === teamId)
?.members.find(({ role, userId }) => role === ROLES.teamOwner && userId === user.id));
const handleSave = () => {
touch('websites');
onSave?.();
router.push(renderUrl(`/websites`));
};
const handleReset = async () => {
onSave?.();
};
return (
<Column gap="6">
{!isAdmin && (
<ActionForm
label={formatMessage(labels.transferWebsite)}
description={formatMessage(messages.transferWebsite)}
>
<DialogTrigger>
<Button isDisabled={!canTransferWebsite}>{formatMessage(labels.transfer)}</Button>
<Modal>
<Dialog title={formatMessage(labels.transferWebsite)} style={{ width: 400 }}>
{({ close }) => (
<WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
)}
</Dialog>
</Modal>
</DialogTrigger>
</ActionForm>
)}
<ActionForm
label={formatMessage(labels.resetWebsite)}
description={formatMessage(messages.resetWebsiteWarning)}
>
<DialogTrigger>
<Button>{formatMessage(labels.reset)}</Button>
<Modal>
<Dialog title={formatMessage(labels.resetWebsite)} style={{ width: 400 }}>
{({ close }) => (
<WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
)}
</Dialog>
</Modal>
</DialogTrigger>
</ActionForm>
<ActionForm
label={formatMessage(labels.deleteWebsite)}
description={formatMessage(messages.deleteWebsiteWarning)}
>
<DialogTrigger>
<Button data-test="button-delete" variant="danger">
{formatMessage(labels.delete)}
</Button>
<Modal>
<Dialog title={formatMessage(labels.deleteWebsite)} style={{ width: 400 }}>
{({ close }) => (
<WebsiteDeleteForm websiteId={websiteId} onSave={handleSave} onClose={close} />
)}
</Dialog>
</Modal>
</DialogTrigger>
</ActionForm>
</Column>
);
}
|